<template>
  <div>
    <div class="top_contain">
      <div class="left">
        <v-card
            elevation="0"
        >
          <v-card-title class="pb-0">{{course.title}}</v-card-title>
          <div class="d-flex pl-4 pb-3">
            <v-card-subtitle class="pa-0">课程开始时间：{{course.startTime}}</v-card-subtitle>
            <v-divider
                class="ml-4 mr-4"
                vertical
            ></v-divider>
            <v-card-subtitle class="pa-0">在线学习人数：{{course.studySum}}</v-card-subtitle>
          </div>
        </v-card>
        <div class="player_contain">
          <el-skeleton
              style="width: 100%"
              :loading="loading"
              animated
          >
            <template slot="template">
              <el-skeleton-item
              variant="rect"
              style="width: 100%;height: 600px"
              />
            </template>
            <template>
              <video-player :key="timer" :options="videoOptions"/>
            </template>
          </el-skeleton>
        </div>
        <div class="left_bottom">
        </div>
      </div>
      <div class="right">
        <v-card
            elevation="0"
            height="100%"
        >
          <v-card-title>课程列表</v-card-title>
          <v-divider></v-divider>
          <v-list
              dense
              max-height="450"
              class="overflow-y-auto overflow-x-hidden"
          >
            <v-list-item-group
                v-model="model"
                active-class="border"
                color="primary"
            >
              <v-list-item
                  class="pl-0"
                  v-for="(item,index) in videoFileList"
                  :key="item.id"
              >
                <template v-slot:default="{active}">
                  <v-list-item-action class="mr-1">
                    <v-icon

                        v-if="active"
                        color="primary"
                    >
                      mdi-menu-right-outline
                    </v-icon>
                  </v-list-item-action>
                  <v-list-item-content @click="updateCurrentVideSource(item.url)">
                    <v-list-item-title >{{index+1}}.&nbsp;&nbsp;{{item.name}}&#12288;&#12288;{{item.playTime}}</v-list-item-title><span></span>
                  </v-list-item-content>
<!--                  <v-list-item-content style="width: 10px">
                    <v-list-item-subtitle class="ma-0 pa-0">{{item.playTime}}</v-list-item-subtitle>
                  </v-list-item-content>-->
                </template>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-card>
      </div>
    </div>
    <div class="bottom_contain">
      <div class="b_left">
        <v-card
            min-height="200"
        >
            <v-tabs>
              <v-tab>课程简介</v-tab>
              <v-tab>课程大纲</v-tab>
              <v-tab-item>
                <v-card elevation="0">
                  <v-card-text>
                    &nbsp;&nbsp;{{course.summary}}
                  </v-card-text>
                </v-card>
              </v-tab-item>
              <v-tab-item>
                <v-card class="pl-4" elevation="0">
                  <v-card-text>
                    &nbsp;&nbsp;{{course.outline}}
                  </v-card-text>
                </v-card>
              </v-tab-item>
            </v-tabs>
        </v-card>
      </div>
<!--      <div class="b_right">
        <v-textarea
            height="180"
            outlined
            label="课堂随记"
            background-color="#E4EFFA"
        ></v-textarea>
      </div>-->
    </div>
  </div>

</template>

<script>
import VideoPlayer from "../../components/video/VideoPlayer";
import {getAllVideos} from "../../network/Details/course/video";
export default {
  name: "CourseVideo",
  components: {VideoPlayer},
  data() {
    return {
      loading:true,
      timer:'',
      model: 0,
      videoOptions: {
        playbackRates: [0.5, 0.7, 1.0, 1.5, 2.0,2.5], //播放速度
        language: 'zh-CN',
        fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        autoplay: false,//自动播放
        controls: true,//用户可以与之交互的控件
        loop:true,//视频一结束就重新开始
        muted:false,//默认情况下将使所有音频静音
        aspectRatio:"16:9",//显示比率
        poster: "", //你的封面地址
        fullscreen:{
          options: {navigationUI: 'hide'}
        },
        sources: [
          {
            src:'',
            type: "video/mp4"
          }
        ]
      },
      controlBar: {
        // timeDivider: true,
        // durationDisplay: true,
        remainingTimeDisplay: false, // 是否显示剩余时间
        fullscreenToggle: true  //全屏按钮
      },
      videoFileList:[],
    };
  },
  created() {
    if(this.videoOptions.sources[0].src === ''){

    }
    this.course = this.$route.query.course;
    this.updateVideoFiles();
  },
  methods:{
    remind() {
      this.$alert('该课程还未上传相关视频，待授课老师上传后才可访问！', '提醒', {
        confirmButtonText: '确定',
        callback: action => {
          this.$router.replace("/home")
        }
      });
    },
    handleLoad () {
      this.timer = new Date().getTime()
    },
    updateVideoFiles() {
      getAllVideos(this.course.courseId).then(res => {
        if(res.data.length === 0){
          this.remind();
        }
        this.videoFileList = res.data;
        this.videoFileList.forEach(item => {
          item.name = item.name.slice(0,-4);
          let a = parseInt(item.playTime/60);
          let b = item.playTime%60;
          item.playTime = a + ':' + b;
        })
        this.updateCurrentVideSource(this.videoFileList[0].url);
      });
    },
    updateCurrentVideSource(url){
      this.videoOptions.sources[0].src = url;
      this.handleLoad();
      this.loading = false;
    }
  },
}
</script>

<style lang="less" scoped>
.top_contain{
  padding: 20px 20px 10px 20px;
  display: flex;
}
.left{
  width: 70%;
  display: flex;
  flex-direction: column;
  .player_contain{
    width: 100%;
  }
}
.right{
  width: 28%;
  margin-left: 2%;
}
.bottom_contain{
  width:100%;
  padding: 0 20px 0 20px;
  display: flex;
  .b_left{
    width: 70%;
  }
  .b_right{
    width: 28%;
    margin-left: 2%;
  }
}
</style>